<template>
	<navigatorComp title="消息中心" bgcColor="#121512" fontColor="#fff" class="header">
	</navigatorComp>
	<view class="content">
		<view class="con">
			<view class="custom_msg" @click="open_qr_code">
				<view>
					<image src="http://112.124.50.179:8888/imgs/home/kefu.png" mode=""></image>
					<text>客服消息</text>
				</view>
				<!-- <view>2024/09/08 15:14</view> -->
			</view>
			<view class="tabs">
				<up-tabs lineWidth="48rpx" lineHeight="6rpx"
					itemStyle="font-weight: 500;font-size: 36rpx;margin-bottom:25rpx;width:130rpx;"
					:activeStyle="{ color: '#fff' }" :inactiveStyle="{ color: '#fff' }" lineColor="#F3E0BB"
					:list="tablist" @click="setTab"></up-tabs>
				<view class="read" @click="readAll">全部已读</view>
			</view>
		</view>
		<view class="msg_list" :style="{ height: height }">
			<mescroll-uni :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:height="height">
				<Msg1 v-if="tabIndex == 0" :list="list" />
				<Msg2 v-if="tabIndex == 1" :list="list" />
				<!-- <Msg3 v-if="tabIndex == 2" :list="list" /> -->
				<!-- <Msg4 v-if="tabIndex == 3" :list="list" /> -->
			</mescroll-uni>
		</view>

		<!-- <QrCode ref="codeRef" /> -->
		<!-- 展示二维码弹框 -->
		<qrcodePopup v-model:show="contactModel.show" :qrcodeUrl="qrcodeUrl"></qrcodePopup>
	</view>
</template>

<script setup>
	import navigatorComp from '/components/navigator/index.vue';
	import {
		onReady,
		onShow,
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted
	} from 'vue';
	import qrcodePopup from '@/components/customerService/qrCodePopup.vue';
	import Msg1 from './common/msg1.vue';
	import Msg2 from './common/msg2.vue';
	// import Msg3 from './common/msg3.vue';
	// import Msg4 from './common/msg4.vue';
	import QrCode from './common/qr_code.vue';
	import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
	import MessageApi from '@/API/message/index.js';
	import store from '@/store/index.js'; //需要引入store

	const messageApi = new MessageApi();
	const qrcodeUrl = ref()
	// 客服弹框
	const contactModel = reactive({
		show: false
	});
	onShow(() => {
		setTimeout(() => {
			latestId.value = 0;
			getMescroll().resetUpScroll();
		}, 1);
	});
	onLoad(() => {
		query();
	});
	onReady(() => {
		navHeight.value = getApp().globalData.navHeight;
		// #ifdef APP-PLUS || H5
		uni.createSelectorQuery()
			.select('.header')
			.boundingClientRect((res) => {
				height.value =
					uni.getSystemInfoSync().screenHeight -
					uni.upx2px(24) -
					res.height -
					getApp().globalData.bottom -
					getApp().globalData.statusBarHeight;
				uni.createSelectorQuery()
					.select('.con')
					.boundingClientRect((rst) => {
						height.value = height.value - rst.height + 'px';
					})
					.exec();
			})
			.exec();
		// #endif
		// #ifdef MP-WEIXIN
		uni.createSelectorQuery()
			.select('.con')
			.boundingClientRect((res) => {
				height.value =
					uni.getSystemInfoSync().screenHeight -
					getApp().globalData.bottom -
					navHeight.value -
					res.height +
					'px';
			})
			.exec();
		// #endif
	});
	const {
		getMescroll,
		mescrollInit
	} = useMescroll(); // 调用mescroll的hook
	//翻页信息
	const downOption = ref({
		page: {
			size: 3
		},
		auto: false
	});
	const upOption = ref({
		page: {
			size: 3
		},
		auto: false
		// empty: false,
	});
	let navHeight = ref(0);
	let height = ref(0);
	let list = ref([]);
	let latestId = ref(0);
	let tabIndex = ref(0);
	const codeRef = ref(null);
	const tablist = reactive([{
			name: '系统消息',
			badge: {
				value: 0
			}
		},
		{
			name: '祭拜',
			badge: {
				value: 0
			}
		},
		// {
		// 	name: '点赞',
		// 	badge: {
		// 		value: 0
		// 	}
		// },
		// {
		// 	name: '留言评论',
		// 	badge: {
		// 		value: 0
		// 	}
		// }
	]);
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	};
	const setTab = (e) => {
		tabIndex.value = e.index;
		setTimeout(() => {
			latestId.value = 0;
			getMescroll().resetUpScroll();
		}, 1);
	};
	const open_qr_code = () => {
		// codeRef.value.show = true;
		contactModel.show = true
	};

	const downCallback = (mescroll) => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	};

	const upCallback = (mescroll) => {
		if (tabIndex.value == 0) {
			messageApi
				.getSysMessageListApi({
					msgType: 1,
					latestId: latestId.value
				})
				.then((res) => {
					const curPageData = res.data.messageSysList || []; // 当前页数据
					if (latestId.value == 0) list.value = [];
					list.value = list.value.concat(curPageData);
					if (curPageData.length) {
						latestId.value = curPageData[curPageData.length - 1].id || 0;
					}
					mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
					if (curPageData.length) {
						let ids = [];
						list.value.forEach((ele) => {
							ids.push(ele.id);
						});
						messageApi
							.readedMessageApi({
								messageIdList: ids,
								userId: uni.getStorageSync('userInfo').userId
							})
							.then((res) => {
								query();
							});
					}
				})
				.catch(() => {
					mescroll.endErr(); // 请求失败, 结束加载
				});
		}
		if (tabIndex.value == 1) {
			messageApi
				.getJibaiMessageListApi({
					msgType: 2,
					latestId: latestId.value
				})
				.then((res) => {
					const curPageData = res.data.messageJibaiList || []; // 当前页数据
					if (latestId.value == 0) list.value = [];
					list.value = list.value.concat(curPageData);
					if (curPageData.length) {
						latestId.value = curPageData[curPageData.length - 1].id || 0;
					}
					mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
					if (curPageData.length) {
						let ids = [];
						list.value.forEach((ele) => {
							ids.push(ele.id);
						});
						messageApi
							.readedMessageApi({
								messageIdList: ids,
								userId: uni.getStorageSync('userInfo').userId
							})
							.then((res) => {
								query();
							});
					}
				})
				.catch(() => {
					mescroll.endErr(); // 请求失败, 结束加载
				});
		}
		// if (tabIndex.value == 2) {
		// 	messageApi
		// 		.getLikeMessageListApi({
		// 			msgType: 3,
		// 			latestId: latestId.value
		// 		})
		// 		.then((res) => {
		// 			const curPageData = res.data.messageLikeList || []; // 当前页数据
		// 			if (latestId.value == 0) list.value = [];
		// 			list.value = list.value.concat(curPageData);
		// 			if (curPageData.length) {
		// 				latestId.value = curPageData[curPageData.length - 1].id || 0;
		// 			}
		// 			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		// 			if (curPageData.length) {
		// 				let ids = [];
		// 				list.value.forEach((ele) => {
		// 					ids.push(ele.id);
		// 				});
		// 				messageApi
		// 					.readedMessageApi({
		// 						messageIdList: ids,
		// 						userId: uni.getStorageSync('userInfo').userId
		// 					})
		// 					.then((res) => {
		// 						query();
		// 					});
		// 			}
		// 		})
		// 		.catch(() => {
		// 			mescroll.endErr(); // 请求失败, 结束加载
		// 		});
		// }
		// if (tabIndex.value == 3) {
		// 	messageApi
		// 		.getReportMessageListApi({
		// 			msgType: 4,
		// 			latestId: latestId.value
		// 		})
		// 		.then((res) => {
		// 			const curPageData = res.data.messageReportList || []; // 当前页数据
		// 			if (latestId.value == 0) list.value = [];
		// 			list.value = list.value.concat(curPageData);
		// 			if (curPageData.length) {
		// 				latestId.value = curPageData[curPageData.length - 1].id || 0;
		// 			}
		// 			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		// 			if (curPageData.length) {
		// 				let ids = [];
		// 				list.value.forEach((ele) => {
		// 					ids.push(ele.id);
		// 				});
		// 				messageApi
		// 					.readedMessageApi({
		// 						messageIdList: ids,
		// 						userId: uni.getStorageSync('userInfo').userId
		// 					})
		// 					.then((res) => {
		// 						query();
		// 					});
		// 			}
		// 		})
		// 		.catch(() => {
		// 			mescroll.endErr(); // 请求失败, 结束加载
		// 		});
		// }
	};
	const query = () => {
		messageApi
			.getMessageNewCoutApi({
				userId: uni.getStorageSync('userInfo').userId
			})
			.then((res) => {
				tablist.forEach((ele, index) => {
					ele.badge.value = res.data.unReadedInfo[index].count;
				});
				qrcodeUrl.value = res.data.csUrl
			})
			.catch(() => {});
	};
	const readAll = () => {
		messageApi
			.readedAllMessageApi({
				userId: uni.getStorageSync('userInfo').userId
			})
			.then((res) => {
				if(res.code === 0){
					query()
				}
			})
			.catch(() => {});
	};
</script>

<style lang="scss">
	page {
		background-color: #121512;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		height: auto;
	}

	.read {
		font-weight: 400;
		font-size: 32rpx;
		color: #f3e0bb;
		line-height: 32rpx;
		text-align: right;
		position: relative;
		bottom: 5px;
		// top: 0;
	}

	.con {
		padding-top: 32rpx !important;
	}

	.custom_msg {
		display: flex;
		align-items: center;
		padding: 32rpx;
		background-color: #292b2a;
		color: #fff;
		justify-content: space-between;
		border-radius: 10rpx;

		image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		view:nth-child(1) {
			display: flex;
			align-items: center;
		}

		view:nth-child(2) {
			font-size: 24rpx;
		}
	}

	::v-deep.u-tabs__wrapper__nav__item__text {
		font-size: 32rpx !important;
	}

	.tabs {
		width: 100%;
		padding-top: 38rpx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
		position: relative;
		align-items: center;
	}

	::v-deep .u-badge {
		margin-left: 0px !important;
		margin-bottom: 20rpx !important;
	}

	.msg_list {
		overflow: auto;
	}
</style>